<template>
	<view class="login">
		<view class="title-padding"></view>
		<view class="img">
			<image mode="widthFix" src="../../static/img/logo2.png"> </image>
			<view class="login_fg">系统登录
				<view style="font-size:32rpx; text-align: center; margin-left:220rpx;">
					V1.0.0
				</view>
			</view>
		</view>

		<view class="form">
			<view class="login_input">
				<uni-icons type="contact-filled" color="#7d7d7d" size="56" style="margin:0 10rpx;">
				</uni-icons>
				<uni-easyinput clearable color='#4d4d4d' autocomplete="off" :styles='state.inputStyle'
					placeholder="请输入账号名" :maxlength='50' v-model="state.form.account"
					@contextmenu.prevent="disableCopyPaste" />
			</view>
			<view class="login_input">
				<uni-icons type="locked-filled" color="#7d7d7d" size="56" style="margin:0 10rpx;"></uni-icons>
				<uni-easyinput clearable color='#4d4d4d' autocomplete="off" :styles='state.inputStyle'
					type='password' :maxlength='50' placeholder="请输入密码" v-model="state.form.userPassword"
					:password-icon="true" @contextmenu.prevent="disableCopyPaste" />
			</view>
		</view>
		<button type="primary" @click="onSubmit">登录</button>

	</view>
</template>

<script setup lang='ts'>   
	import {
		reactive,
	} from 'vue';
	import {
		onShow
	} from '@dcloudio/uni-app';
	import {
		wxLogin,
	} from '../../utils/api/api.js'

	const state = reactive({
		timeOut: null,
		delayClick: false,
		isRotate: false, //是否加载旋转
		form: {
			account: '',
			userPassword: '',
		},

		//输入框样式
		inputStyle: {
			fontSize: '30rpx',
			color: '#4d4d4d',
			border: 'none'
		},
		labelStyle: {
			fontSize: '36rpx',
			height: '80rpx',
			lineHeight: '80rpx'
		},


	});
	onShow(()=>{
		if(uni.getStorageSync('accountInfo')){
			state.form.account = uni.getStorageSync('accountInfo').account
		}
	})
	const disableCopyPaste = (event) => {
		// 阻止默认的右键菜单
		event.preventDefault();
		// 通过clipboardData属性禁用剪贴板的复制和粘贴
		if (event.clipboardData) {
			event.clipboardData.setData('text', '');
		}
		// 兼容性处理
		if (window.clipboardData) {
			window.clipboardData.setData('text', '');
		}
	}
	const toLogin = () => {
		let params = {
			userLogin: state.form.account,
			password: state.form.userPassword,
			openId: uni.getStorageSync('BindInfo').openId
		}

		wxLogin(params).then(res => {
			console.log("wxLogin", res)
			if (res.code == 1) {
				//获取当前时间戳-10秒
				let timestamp = new Date().getTime() - 10000;
				// this.$store.commit('setUserInfo', {
				// 	username: this.form.username,
				// 	password: this.form.password
				// })
				uni.setStorageSync('BindInfo', res.data.weChatUserInfo);
				uni.setStorageSync('accountInfo', {
					username: state.form.account,
					password: state.form.userPassword
				});
				
				//token
				uni.setStorageSync('publictoken', res.data.access_token)
				//刷新的token
				uni.setStorageSync('publicrefresh_token', res.data.refresh_token)
				//过期时间
				uni.setStorageSync('expires_in', timestamp + res.data.expires_in)
				//组织机构id
				uni.setStorageSync('orgId', res.data.orgId)
				//用户id
				uni.setStorageSync('userId', res.data.userId)
				
				uni.switchTab({
					url: '../index/index'
				});
			} else {
				uni.showToast({
					title: res.msg,
					duration: 2000,
					mask: true,
					icon: 'none'
				});
				state.isRotate = false
			}
		})
	}
	const onSubmit = () => {
		if (state.isRotate) {
			//判断是否加载中，避免重复点击请求
			return false;
		}

		if (!state.form.account) {
			uni.showToast({
				title: '请输入账号名',
				duration: 2000,
				icon: 'none',
				mask: true
			});
			return;
		}
		if (!state.form.userPassword) {
			uni.showToast({
				title: '请输入密码',
				duration: 2000,
				icon: 'none',
				mask: true
			});
			return;
		}

		state.isRotate = true
		
		toLogin()
	};

</script>

<style lang="scss" scoped>
	.login {
		width: 100%;
		height: 100vh;
		background: #fff;
		-webkit-user-select: none;
		/* Safari */
		-moz-user-select: none;
		/* Firefox */
		-ms-user-select: none;
		/* IE/Edge */
		user-select: none;
		/* 标准语法 */

		.img {
			width: 100%;
			padding-top: 10%;
			padding-bottom: 5%;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;

			image {
				width: 200rpx;
				margin: auto;
			}

			.login_fg {
				width: 100%;
				margin: auto;
				font-size: 40rpx;
				text-align: center;
				color: #34c9c5;
			}

		}

		.login_register {
			color: #4d4d4d;
			text-decoration: underline;
			height: 80rpx;
			text-align: right;
		}


		.form {
			width: 80%;
			margin: auto;
			padding-top: 6%;

			.login_input {
				display: flex;
				align-items: center;
				justify-content: center;
				// border-radius: 20rpx;
				padding: 20rpx 30rpx;
				margin: 60rpx auto;
				border-bottom: 2rpx solid rgba(28, 151, 103, 0.7);
				// background: rgba(28, 151, 103, 0.3);

				.u-input {
					align-items: center;


				}
			}

			.tel {
				display: flex;
				align-items: center;
			}

			.code {
				cursor: pointer;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 10rpx;
				width: 145rpx;
				height: 55rpx;
				margin-left: 20rpx;
				// background-color: #6990f6;
				color: #fff;
				font-size: 28rpx;
			}

			.code.active {
				background-color: #eeeeee;
				color: #ffffff;
			}
		}

		.login_bottom {
			width: 100%;
			color: rgba(255, 255, 255, 0.5);
			position: fixed;
			bottom: 20rpx;
			text-align: center;
		}

		.button {
				display: flex;
				align-items: center;
				height: 35px;
				margin-left: 10px;
			}
	}
</style>